<template>
	<view class="page">
		<navigation :titleColor="titleColor" style="z-index: 9999999999;" class="header_navigation" textColor="#333333" barColor="#333333" defaultButton="back">
			服务详情
		</navigation>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scroll="pageScroll">
			<view class="page_scroll-panel">
				<view class="header">
					<swiper
						class="header_swiper"
						:current="swiperCurrent"
						@change="changeSwiper"
						:indicator-dots="false"
						:autoplay="true"
						:interval="3000"
						:duration="1000"
						:circular="true"
					>
						<swiper-item v-for="(item, index) in detail.images" :key="index">
							<view class="swiper-item"><image class="image" :src="item" mode=""></image></view>
						</swiper-item>
					</swiper>
					<view class="dots" v-if="detail.images && detail.images.length > 1">
						<block v-for="(item, index) in detail.images.length" :key="item"><view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view></block>
					</view>
				</view>
				<view class="info">
					<view class="info_header">
						<view class="title">
							<view class="titile_text">{{ detail.name || '--' }}</view>
							<view class="sign_panel">
								<view class="sign green" v-if="detail.zhengce == $enums['服务政策']['公益']">公益</view>
								<view class="sign orange" v-if="detail.zhengce == $enums['服务政策']['常规']">常规</view>
							</view>
						</view>
						<view class="rate_panel">
							<uni-rate :size="18" :value="detail.starNum" :disabled="true" disabledColor="#f6a749" />
							<view class="text">{{ detail.starNum }}</view>
						</view>
					</view>
					<view class="info_container">{{ detail.details }}</view>
					<veiw class="info_footer">
						<view class="price">
							服务价格：
							<text class="text" v-if="detail.money &&detail.money > 0">￥{{ detail.money | toFixed(2) }}/次</text>
							<text class="pirce gratis" v-else>免费</text>
						</view>
						<view class="count">{{ detail.count }}人购买</view>
					</veiw>
				</view>
				<view class="serve_info">
					<view class="form_item">
						<view class="label">补助金额：</view>
						<view class="text">¥10.00</view>
					</view>
					<view class="form_item">
						<view class="label">公司名称：</view>
						<view class="text">{{ detail.companyName }}</view>
					</view>
					<view class="form_item">
						<view class="label">服务内容：</view>
						<view class="text">{{ detail.content }}</view>
					</view>
					<view class="form_item">
						<view class="label">服务时长：</view>
						<view class="text">{{ detail.time }}</view>
					</view>
				</view>
				<view class="evaluate_panel">
					<view class="evaluate_header">服务评价</view>
					<view class="no_data" v-if="detail.judges.length <= 0">暂无评价</view>
					<view class="evaluate_item" v-for="(item, index) in detail.judges" :key="index">
						<view class="item_header">
							<view class="name">{{ item.wxNickname }}</view>
							<view class="time">{{item.createTime | toDate('yyyy-MM-dd hh:mm')}}</view>
						</view>
						<uni-rate class="evaluate_num" :size="18" :value="item.starNumJudge" :disabled="true" disabledColor="#f6a749" />
						<view class="evaluate">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<button class="page_btn" hover-class="page_btn-hover" @tap="reservationService">预约服务</button>
	</view>
</template>

<script>
import { uniRate } from '@dcloudio/uni-ui';
import * as userServeApi from '@/api/userApi/serve.js';
export default {
	components: {
		uniRate
	},
	data() {
		return {
			$enums: this.$enums,
			id: '',
			titleColor: 'rgba(255,255,255,0)',
			swiperCurrent: 0,
			detail: {
				judges: []
			}
		};
	},
	methods: {
		getDetail(id) {
			userServeApi
				.queryDetails({ id: id })
				.then(res => {
					if (res.code === 0) {
						this.detail = res.data;
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		changeSwiper(e) {
			this.swiperCurrent = e.detail.current;
		},
		reservationService() {
			uni.navigateTo({
				url: `/pages/serve/reservationService/reservationService?id=${this.id}`
			});
		},
		pageScroll(event) {
			let scrollTop = parseInt(event.detail.scrollTop);
			let matrixingColor = (scrollTop - 20) / 100;
			this.pageScrollStyle(matrixingColor);
		},
		pageScrollStyle(matrixing) {
			this.titleColor = 'rgba(255,255,255,' + matrixing + ')';
		}
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.getDetail(options.id);
		}
	}
};
</script>

<style lang="stylus">
.page_scroll
	position absolute
	top 0rpx
	right 0rpx
	bottom 140rpx
	left 0rpx
.page_scroll-panel {
	width 100%
	height 100%
}
.page_btn
	position fixed
	bottom 30rpx
	right 30rpx
	left 30rpx
.header
	width 100%
	position relative
	.header_navigation
		position absolute
		top 0rpx
		z-index 9999
	.header_swiper
		width 100%
		height 510rpx
		.swiper-item, .image
			width 100%
			height 100%
	.dots
		position absolute
		bottom 10rpx
		left 50%
		// 这里一定要注意兼容不然很可能踩坑
		transform translate(-50%, 0)
		-webkit-transform translate(-50%, 0)
		z-index 9
		display flex
		flex-direction row
		justify-content center
		.dot
			width 28rpx
			height 8rpx
			background rgba(196, 196, 196, 1)
			border-radius 4rpx
			margin-right 20rpx
		.active
			background rgba(255, 66, 0, 1)
.info
	width 100%
	padding 0rpx 30rpx 30rpx 30rpx
	box-sizing border-box
	border-bottom 16rpx solid rgba(246, 246, 246, 1)
	.info_header
		width 100%
		display flex
		align-items center
		justify-content space-between
		margin-top 30rpx
		.title
			flex 1
			margin-right 10rpx
			letter-spacing 1rpx
			font-size 32rpx
			font-family PingFang SC
			font-weight bold
			color #333333
			display flex
			align-items center
			.titile_text
				flex 1
				overflow hidden
				text-overflow ellipsis
				display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
				-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				-webkit-line-clamp 2 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
				word-wrap break-word
			.sign
				margin-left 10rpx
				font-size 28rpx
				font-family PingFang SC
				font-weight 400
				color #FFFFFF
				padding 4rpx
				border-radius 8rpx
				transform scale(0.7)
			.green
				background-color rgba(0, 181, 0, 1)
			.orange
				background-color rgba(246, 132, 21, 1)
		.rate_panel
			display flex
			align-items center
			.text
				font-size 24rpx
				font-family PingFang SC
				font-weight 400
				color #F6A749
				margin-left 10rpx
	.info_container
		flex 1
		margin-top 15rpx
		font-size 28rpx
		letter-spacing 1rpx
		font-family PingFang SC
		font-weight 400
		color #999999
	.info_footer
		margin-top 40rpx
		display flex
		align-items center
		justify-content space-between
		.price
			font-size 24rpx
			font-family PingFang SC
			font-weight 400
			color #999999
			.pirce
				font-size 32rpx
				font-family PingFang SC
				font-weight bold
				color #FF4200
			.gratis
				color rgba(51, 51, 51, 1)
			.text
				font-size 32rpx
				font-family PingFang SC
				font-weight 500
				color #FF4200
		.count
			font-size 24rpx
			font-family PingFang SC
			font-weight 400
			color #999999
.serve_info
	width 100%
	padding 20rpx 30rpx
	box-sizing border-box
	border-bottom 16rpx solid rgba(246, 246, 246, 1)
	.form_item
		display flex
		align-items flex-start
		justify-content space-between
		margin-bottom 20rpx
		.label
			font-size 28rpx
			font-family PingFang SC
			font-weight 400
			color #999999
			letter-spacing 1rpx
		.text
			flex 1
			text-align right
			margin-left 30rpx
			font-size 28rpx
			font-family PingFang SC
			font-weight 400
			color #666666
			letter-spacing 1rpx
.evaluate_panel
	width 100%
	padding 40rpx 30rpx 40rpx 30rpx
	box-sizing border-box
	.no_data {
		width 100%
		height 100rpx
		font-size 32rpx
		font-family PingFang SC
		font-weight 400
		color #666
		display flex
		align-items center
		justify-content center
	}
	.evaluate_header
		font-size 32rpx
		font-family PingFang SC
		font-weight 400
		color #333333
	.evaluate_item
		margin-top 30rpx
		padding 20rpx 20rpx 40rpx 20rpx
		box-sizing border-box
		background-color rgba(246, 246, 246, 1)
		border-radius 8px
		.item_header
			display flex
			align-items center
			justify-content space-between
			margin-bottom 20rpx
			.name
				font-size 28rpx
				font-family PingFang SC
				font-weight 400
				color #333333
			.time
				font-size 24rpx
				font-family PingFang SC
				font-weight 400
				color #999999
		.evaluate
			margin-top 20rpx
			font-size 28rpx
			font-family PingFang SC
			font-weight 400
			color #666666
</style>
